<div class="container">	
	
	<div class="col-lg-12 col-md-12 col-xs-12">
		<div class="col-lg-6 col-md-6 col-xs-6">
			<h3>Ray's code track</h3>
			<canvas id="LineChart" width="400" height="400"></canvas>
		</div>

		<div class="col-lg-6 col-md-6 col-xs-6">
			<h3>Ray's code track compare with kami's</h3>
			<canvas id="Line2Chart" width="400" height="400"></canvas>
		</div>



		<div class="col-lg-6 col-md-6 col-xs-6">
			<h3>Ray's code track</h3>
			<canvas id="BarChart" width="400" height="400"></canvas>
		</div>

		<div class="col-lg-6 col-md-6 col-xs-6">
			<h3>Ray's code track compare with kami's</h3>
			<canvas id="Bar2Chart" width="400" height="400"></canvas>
		</div>

		<div class="col-lg-6 col-md-6 col-xs-6">
			<h3>Project code composition</h3>
			<canvas id="PieChart" width="400" height="400"></canvas>
		</div>

		<div class="col-lg-6 col-md-6 col-xs-6">
			<h3>Project Contribution</h3>
			<canvas id="DoughnutChart" width="400" height="400"></canvas>
		</div>

		<div class="col-lg-12 col-md-12 col-xs-12">
			<h3>Ray vs Kami</h3>
			<canvas id="RadarChart" width="800" height="800"></canvas>
		</div>

		<script type="text/javascript">
			var singledata = {
			    labels: ["January", "February", "March", "April", "May", "June", "July"],
			    datasets: [
			        {
			            label: "Ray",
			            fillColor: "rgba(220,220,220,0.2)",
			            strokeColor: "rgba(220,220,220,1)",
			            pointColor: "rgba(220,220,220,1)",
			            pointStrokeColor: "#fff",
			            pointHighlightFill: "#fff",
			            pointHighlightStroke: "rgba(220,220,220,1)",
			            data: [1000,2459,4037,5821,7321,9001,9992]
			        }
			    ]
			};
			var comparedata = {
			    labels: ["January", "February", "March", "April", "May", "June", "July"],
			    datasets: [
			        {
			            label: "Ray",
			            fillColor: "rgba(220,220,220,0.2)",
			            strokeColor: "rgba(220,220,220,1)",
			            pointColor: "rgba(220,220,220,1)",
			            pointStrokeColor: "#fff",
			            pointHighlightFill: "#fff",
			            pointHighlightStroke: "rgba(220,220,220,1)",
			            data: [10,20,40,40,50,50,55]
			        },
			        {
			            label: "Kami",
			            fillColor: "rgba(151,187,205,0.2)",
			            strokeColor: "rgba(151,187,205,1)",
			            pointColor: "rgba(151,187,205,1)",
			            pointStrokeColor: "#fff",
			            pointHighlightFill: "#fff",
			            pointHighlightStroke: "rgba(151,187,205,1)",
			            data: [0,13,20,34,44,59,72]
			        }
			    ]
			};
			var piedata = [
			    {
			        value: 300,
			        color:"#F7464A",
			        highlight: "#FF5A5E",
			        label: "Ruby"
			    },
			    {
			        value: 250,
			        color: "#46BFBD",
			        highlight: "#5AD3D1",
			        label: "Html"
			    },
			    {
			        value: 200,
			        color: "#FDB45C",
			        highlight: "#FFC870",
			        label: "Css"
			    },
			    {
			        value: 100,
			        color: "#949FB1",
			        highlight: "#A8B3C5",
			        label: "Javascript"
			    }
			];
			var Doughnutdata = [
			    {
			        value: 25,
			        color:"#F7464A",
			        highlight: "#FF5A5E",
			        label: "Herbert"
			    },
			    {
			        value: 20,
			        color: "#46BFBD",
			        highlight: "#5AD3D1",
			        label: "Eric"
			    },
			    {
			        value: 25,
			        color: "#FDB45C",
			        highlight: "#FFC870",
			        label: "Viki"
			    },
			    {
			        value: 15,
			        color: "#949FB1",
			        highlight: "#A8B3C5",
			        label: "Kami"
			    },
			    {
			        value: 15,
			        color: "#2980b9",
			        highlight: "#3498db",
			        label: "Ray"
			    }
			];
			var radardata = {
			    labels: ["difficulty", "performance", "efficiency", "aspectsX", "aspectsY" ,"aspectsZ"],
			    datasets: [
			        {
			            label: "Ray",
			            fillColor: "rgba(220,220,220,0.2)",
			            strokeColor: "rgba(220,220,220,1)",
			            pointColor: "rgba(220,220,220,1)",
			            pointStrokeColor: "#fff",
			            pointHighlightFill: "#fff",
			            pointHighlightStroke: "rgba(220,220,220,1)",
			            data: [5.6,8,7,6.5,6,8]
			        },
			        {
			            label: "Kami",
			            fillColor: "rgba(151,187,205,0.2)",
			            strokeColor: "rgba(151,187,205,1)",
			            pointColor: "rgba(151,187,205,1)",
			            pointStrokeColor: "#fff",
			            pointHighlightFill: "#fff",
			            pointHighlightStroke: "rgba(151,187,205,1)",
			            data: [7.2,7.7,6.4,5.4,9,7.3]
			        }
			    ]
			};
		var ctx = document.getElementById("LineChart").getContext("2d");
		var myLineChart = new Chart(ctx).Line(singledata, {bezierCurve : false});

		var ctx = document.getElementById("Line2Chart").getContext("2d");
		var myLine2Chart = new Chart(ctx).Line(comparedata, {bezierCurve : false});

		var ctx = document.getElementById("BarChart").getContext("2d");
		var myBarChart = new Chart(ctx).Bar(singledata, {bezierCurve : false});

		var ctx = document.getElementById("Bar2Chart").getContext("2d");
		var myBar2Chart = new Chart(ctx).Bar(comparedata, {bezierCurve : false});

		var ctx = document.getElementById("PieChart").getContext("2d");
		var myPieChart = new Chart(ctx).Pie(piedata,{});

		var ctx = document.getElementById("DoughnutChart").getContext("2d");
		var myDoughnutChart = new Chart(ctx).Doughnut(Doughnutdata,{});

		var ctx = document.getElementById("RadarChart").getContext("2d");
		var myRadarChart = new Chart(ctx).Radar(radardata, {});

			</script>
	</div>
</div>